<template>
	<view class="goods-detail-container">
		<view class="tabbox">
			<view class="tabbar-item" :class="[tabIndex === index ? 'active' : '']" v-for="(item, index) in tabbars" :key="index" @click="scrollTo(index)">
				{{ item.name }}
			</view>
			<view class="line" :style="{ width: lineStyle.width, transform: lineStyle.transform,transitionDuration: lineStyle.transitionDuration}"></view>
		</view>
		<scroll-view class="tabbar-scroll" 
		scroll-y="true" 
		:style="{ height: `${scrollHieght}px` }" 
		:scroll-into-view="targetTab" 
		scroll-with-animation="true" 
		@scroll="scrollTab">
			<view class="goods-pic-box scroll-item" id="tab1">
				<view class="showcase-pic">
					<swiper class="swiper-container" circular :interval="3000" @change="changeCurrent"
						:current="currentIndex" :duration="1000">
						<swiper-item v-for="(item, index) in picList" :key="index">
							<view class="swiper-item">
								<image @click="preview(index)" :src="$imageUrl + item"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="dot-box">
					<scroll-view class="dot-list" :style="{ backgroundColor: dotsBG }" scroll-x="true">
						<view class="dot" :class="[index === currentIndex ? 'current' : '']"
							v-for="(item, index) in picList" :key="index" @click="changePic(index)">
							<image :src="url + item"></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="wrapper">
				<view class="introduction-box">
					<view class="price-box">
						<view class="price">
							<!-- ￥<text>8848</text> -->
							￥<text>{{ goodsInfo.goodsPrice }}</text>
						</view>
						<view class="sell-count">
							6.4万+人付款
						</view>
					</view>
					<view class="content-box">
						<!-- Jordan Air Jordan 1 mid se "zen master"扎染高帮 复古篮球鞋 男款 黑白粉 -->
						{{ goodsInfo.goodsName }}
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="setting-service-box common">
					<view class="setting-box item">
						<view class="title">
							配置
						</view>
						<view class="serivce-list">
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>7天无理由退货</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>次日达</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>假一赔十</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>逐件检查</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>防伪包装</text>
							</view>
						</view>
					</view>
					<view class="serice-box item">
						<view class="title">
							服务
						</view>
						<view class="serivce-list">
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>7天无理由退货</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>次日达</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>假一赔十</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>逐件检查</text>
							</view>
							<view class="service-item">
								<uni-icons type="checkbox"></uni-icons>
								<text>防伪包装</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="buyer-content-box common scroll-item" id="tab2">
					<my-comment-container @seeAllComments="gotoComments" @comment="comment" :commentInfo="commentInfo"></my-comment-container>
				</view>
				<view class="store-container" @click="gotoStore">
					<view class="store-box common">
						<view class="store-wrap">
							<view class="store-avatar">
								<image :src="$imageUrl + storeInfo.logo"></image>
							</view>
							<view class="store-info">
								<view class="store-name">
									{{ storeInfo.storeName }}
								</view>
								<view class="store-desc">
									<!-- 再多看一眼，就会爆炸。再靠近一点，快被融化。 -->
									{{ storeInfo.storeDesc }}
								</view>
							</view>
						</view>
						<view class="goto-store">
							进入店铺<uni-icons type="forward"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="similar-goods common scroll-item" id="tab3">
					<view class="title">
						相关推荐
					</view>
					<swiper :duration="1000">
						<swiper-item goods-wrapper>
							<view class="goods-item" v-for="(item, index) in page1">
								<navigator :url="`goods_detail?goodsId=${item.goodsId}`">
									<view class="img-box">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="goods-info">
										<view class="description">
											{{ item.goodsName }}
										</view>
										<view class="goods-price">
											￥<span>{{ item.goodsPrice }}</span>
										</view>
									</view>
								</navigator>
							</view>
						</swiper-item>
						<swiper-item goods-wrapper v-if="pages > 1">
							<view class="goods-item" v-for="(item, index) in page2">
								<navigator :url="`goods_detail?goodsId=${item.goodsId}`">
									<view class="img-box">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="goods-info">
										<view class="description">
											{{ item.goodsName }}
										</view>
										<view class="goods-price">
											￥<span>{{ item.goodsPrice }}</span>
										</view>
									</view>
								</navigator>
							</view>
						</swiper-item>
						<swiper-item goods-wrapper v-if="pages > 2">
							<view class="goods-item" v-for="(item, index) in page3">
								<navigator :url="`goods_detail?goodsId=${item.goodsId}`">
									<view class="img-box">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="goods-info">
										<view class="description">
											{{ item.goodsName }}
										</view>
										<view class="goods-price">
											￥<span>{{ item.goodsPrice }}</span>
										</view>
									</view>
								</navigator>
							</view>
						</swiper-item>
						<swiper-item goods-wrapper v-if="pages > 3">
							<view class="goods-item" v-for="(item, index) in page4">
								<navigator :url="`goods_detail?goodsId=${item.goodsId}`">
									<view class="img-box">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="goods-info">
										<view class="description">
											{{ item.goodsName }}
										</view>
										<view class="goods-price">
											￥<span>{{ item.goodsPrice }}</span>
										</view>
									</view>
								</navigator>
							</view>
						</swiper-item>
						<swiper-item goods-wrapper v-if="pages > 4">
							<view class="goods-item" v-for="(item, index) in page5">
								<navigator :url="`goods_detail?goodsId=${item.goodsId}`">
									<view class="img-box">
										<image :src="$imageUrl + item.goodsImg"></image>
									</view>
									<view class="goods-info">
										<view class="description">
											{{ item.goodsName }}
										</view>
										<view class="goods-price">
											￥<span>{{ item.goodsPrice }}</span>
										</view>
									</view>
								</navigator>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="goods-desc scroll-item" id="tab4">
				<view class="none-desc">
					<view class="title">
						商品详情
					</view>
					<rich-text :nodes="goodsInfo.goodsDesc" v-if="goodsInfo.goodsDesc"></rich-text>
					<view class="content" v-else>
						暂无简介T_T
					</view>
				</view>
			</view>
		</scroll-view>
		<my-goods-nav @click="onClick" @buttonClick="buttonClick" :options="options"></my-goods-nav>
		<view class="specification-container" :class="isSetting ? 'show' : 'none'">
			<view class="specification-mask" @click.self="cancel"></view>
			<view class="specification-popup">
				<view class="popup-close" @click="cancel">
					<uni-icons type="closeempty" size="26" color="#d9d9d9"></uni-icons>
				</view>
				<view class="popup-header">
					<view class="popup-header-img">
						<image :src="$imageUrl + goodsInfo.goodsImg"></image>
					</view>
					<view class="popup-header-text">
						<view class="popup-price">
							<view class="now">
								<!-- <label for="">￥</label><text>1569</text> -->
								<label for="">￥</label><text>{{ goodsInfo.goodsPrice }}</text>
							</view>
							<!-- <view class="before">
								<label for="">￥</label><text>1589</text>
							</view> -->
						</view>
						<view class="service">

						</view>
						<view class="parameter">
							<!-- 剩余<text>20</text> -->
							剩余<text>{{ goodsInfo.capacity }}</text>
						</view>
						<view class="setting">
							已选<text>{{ goodsSetting.goodsOptions }}</text>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="specification-slider">
					<view class="specification-sele" v-for="(item,index) in specifications" :key="index">
						<view class="specification-sele-name">{{item.name}}</view>
						<view class="specification-sele-list">
							<text :class=" item.start === index2 ? 'current' : '' " @click="setting(index,index2)"
								v-for="(child,index2) in item.attrValues" :key="index2">{{child.value}}</text>
						</view>
					</view>
					<view class="specification-sele count">
						<view class="specification-sele-name">数量</view>
						<uni-number-box :min="1" @change="numChangeHandler"></uni-number-box>
					</view>
				</scroll-view>
				<view class="popup-submit">
					<view class="popup-btn" @click="sure">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateformat from '@/utils/dateformat/dateformat.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		props: {
			dotsBG: {
				type: String,
				default: '#eee'
			}
		},
		data() {
			return {
				url: '',
				pages: 0,
				tabIndex: 0,
				picWidth: 0,
				scrollHieght: 0,
				currentIndex: 0,
				isSetting: false,
				targetPage: '',
				targetTab: 'tab1',
				nowPostion: 0,
				queryParams: {
					goodsId: '',
					page: 1,
					pageSize: 6,
				},
				queryComment: {
					goodsId: '',
					page: 1,
					pageSize: 2,
				},
				picList: [],
				goodsInfo: {},
				storeInfo: {},
				commentInfo: {},
				lineStyle: {},
				scrollItem: [],
				specifications: [],
				page1: [],
				page2: [],
				page3: [],
				page4: [],
				page5: [],
				goodsSetting: {
					goodsId: '',
					goodsImg: '',
					goodsName: '',
					goodsPrice: '',
					goodsOptions: '',
					goodsCount: 1
				},
				temp: [],
				isNow: true,
				options: [{
						icon: 'heart',
						text: '想要'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					},
				],
				tabbars: [
					{
						name: '商品'
					},
					{
						name: '评论'
					},
					{
						name: '相关推荐'
					},
					{
						name: '详情'
					},
				]
			}
		},
		watch: {
			total: {
				handler(newVal) {
					console.log(newVal);
					const findResult = this.options.find(x => x.text === '购物车')
					if (findResult) {
						findResult.info = newVal
					}
					console.log(this.options[1]);
				},
				immediate: true
			}
		},
		onLoad(options) {
			const goodsId = options.goodsId
			this.getGoodsDetail(goodsId)
			this.getStoreInfo(goodsId)
			this.getSimilarGoods(goodsId)
			this.getData(goodsId)
			this.url = this.$imageUrl
		},
		mounted() {
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.tabbar-scroll').boundingClientRect()
					query.exec((res) => {
						console.log(res);
						this.scrollHieght = resu.windowHeight - res[0].top
					})
				}
			})
			this.lineChange()
			this.getItemDistence()
		},
		computed: {
			...mapState('module_user', ['userinfo', 'token']),
			...mapGetters('module_cart', ['total']),
		},
		methods: {
			...mapMutations(['updateNowPay', 'updateNowPayGoods']),
			...mapMutations('module_cart', ['addToCart']),
			changeCurrent(e) {
				this.currentIndex = e.target.current
			},
			changePic(index) {
				this.currentIndex = index
			},
			preview(index) {
				console.log(this.picList[index]);
				const pics = this.picList.map(item => this.$imageUrl + item)
				uni.previewImage({
					current: index,
					urls: pics
				})
			},
			onClick(e) {
				console.log(e);
				if (e.content.text === '购物车') {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			numChangeHandler(val) {
				this.goodsSetting.goodsCount = +val
			},
			gotoStore() {
				uni.navigateTo({
					url: `/subcontract/store/store?storeId=${this.storeInfo.id}`
				})
			},
			gotoComments() {
				console.log('goto comments');
				uni.navigateTo({
					url: `/subcontract/comment_detail/comment_detail?goodsId=${this.goodsInfo.goodsId}`
				})
			},
			comment() {
				uni.navigateTo({
					url: `/subcontract/add_comment/add_comment?goodsId=${this.goodsInfo.goodsId}`
				})
			},
			buttonClick(e) {
				console.log(e);
				if (e.content.text === '立即购买') {
					this.isSetting = true
					this.isNow = true
					this.targetPage = 'pay'
				} else if (e.content.text === '加入购物车') {
					this.isSetting = true
					this.isNow = false
				}
			},
			setting(index, attribute) {
				this.specifications[index]['start'] = attribute
				let totalPrice = []
				if (this.specifications[index].name === '颜色') {
					this.goodsInfo.goodsImg = this.specifications[index].attrValues[attribute].picture
					this.goodsSetting.goodsImg = this.specifications[index].attrValues[attribute].picture
				}
				if (this.temp.indexOf(this.specifications[index].attrValues[attribute]) === -1) {
					if (this.temp.every(item => {
						return this.specifications[index].attrValues.indexOf(item) == -1
					})) {
						this.temp.push(this.specifications[index].attrValues[attribute])
					} else {
						this.temp.forEach(item => {
							if (this.specifications[index].attrValues.indexOf(item) !== -1) {
								this.temp[this.temp.indexOf(item)] = this.specifications[index].attrValues[
									attribute]
							}
						})
					}
				}
				console.log(this.temp);
				this.goodsInfo.goodsPrice = this.temp.reduce((total, item) => total += item.price, 0)

				let goodsDesc = ''
				this.temp.forEach(item => {
					goodsDesc += `${item.value},`
				})
				this.goodsSetting.goodsOptions = goodsDesc.slice(0, goodsDesc.length - 1)
				this.goodsSetting.goodsPrice = this.temp.reduce((total, item) => total += item.price, 0)
			},
			cancel() {
				console.log('close');
				this.isSetting = false
				this.targetPage = ''
			},
			sure() {
				console.log(this.targetPage);
				if (this.isNow) {
					if(!this.token) return uni.$showMsg('请先登录')
					this.updateNowPay()
					this.updateNowPayGoods(this.goodsSetting)
					uni.navigateTo({
						url: '/subcontract/settlement/settlement'
					})
				} else {
					this.goodsSetting.userId = this.userinfo.id
					let date = new Date()
					date.setMinutes(date.getMinutes() - date.getTimezoneOffset())
					this.goodsSetting.createTime = dateformat(date, 'yyyy-MM-dd HH:mm:ss')
					this.goodsSetting.goodsState = true
					this.addToCart(JSON.parse(JSON.stringify(this.goodsSetting)))
					if (this.userinfo.id) {
						uni.$http.post(`/user/carts/`, [JSON.parse(JSON.stringify(this.goodsSetting))])
					}
				}
				this.cancel()
			},
			async getGoodsDetail(goodsId) {
				const {
					data: res
				} = await uni.$http.get(`/goods/${goodsId}`)
				this.specifications = res.data.attrs
				this.specifications.forEach(item => {
					item.start = 0
				})
				this.specifications = JSON.parse(JSON.stringify(this.specifications))
				this.goodsInfo = res.data
				res.data.attrs.forEach(item => {
					if (item.name === '颜色') {
						this.picList = item.attrValues.map(item => item.picture)
					}
				})
				// this.picList = res.data.attrs[0].attrValues.map(item => item.attrImg)
				console.log(this.goodsInfo.goodsPrice);
				this.goodsSetting.goodsId = this.goodsInfo.goodsId
				this.goodsSetting.goodsName = this.goodsInfo.goodsName
				for (let i = 0; i < this.specifications.length; i++) {
					this.setting(i, 0)
				}
			},
			async getData(goodsId) {
				this.queryComment.goodsId = goodsId
				const { data: res } = await uni.$http.get('/comments/page', this.queryComment)
				console.log(res);
				this.commentInfo = res.data
			},
			async getStoreInfo(goodsId) {
				const {
					data: res
				} = await uni.$http.get(`/stores/goods/${goodsId}`)
				console.log(res);
				this.storeInfo = res.data
			},
			async getSimilarGoods(goodsId) {
				this.queryParams.goodsId = goodsId
				this.queryParams.promotional = 1
				const { data: res } = await uni.$http.get(`/goods/similar/page`, this.queryParams)
				this.page1 = res.data.records
				this.pages = Math.ceil(res.data.total / this.queryParams.pageSize)
				if(this.pages > 1) {
					this.queryParams.page = 2
					const { data: res } = await uni.$http.get(`/goods/similar/page`, this.queryParams)
					this.page2 = res.data.records
				}
				if(this.pages > 2) {
					this.queryParams.page = 3
					const { data: res } = await uni.$http.get(`/goods/similar/page`, this.queryParams)
					this.page3 = res.data.records
				}
				if(this.pages > 3) {
					this.queryParams.page = 4
					const { data: res } = await uni.$http.get(`/goods/similar/page`, this.queryParams)
					this.page4 = res.data.records
				}
				if(this.pages > 4) {
					this.queryParams.page = 5
					const { data: res } = await uni.$http.get(`/goods/similar/page`, this.queryParams)
					this.page5 = res.data.records
				}
			},
			scrollTo(index) {
				this.tabIndex = index
				this.targetTab = `tab${index+1}`
				console.log(this.targetTab, this.tabIndex);
				this.lineChange()
			},
			lineChange() {
				let lineWidth = 0, lineLeft = 0
				this.getElementData(`.tabbar-item`, (data)=> {
					let el = data[this.tabIndex]
					lineWidth = el.width / 2
					lineLeft = el.width / 2 + (-data[0].left) + el.left
					this.lineStyle = {
						width: `${lineWidth}px`,
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
						transitionDuration: `${this.duration}s`
					}
				})
			},
			getElementData(el, callback){
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			scrollTab(e) {
				this.nowPostion = this.scrollItem.findLastIndex(item => e.detail.scrollTop >= (item.bottom - 200)) + 1
				if(this.nowPostion > this.scrollItem.length - 1) {
					this.tabIndex = this.scrollItem.length - 1 
				}else {
					this.tabIndex = this.nowPostion
				}
				this.lineChange()
			},
			getItemDistence() {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(`.scroll-item`).boundingClientRect(data => {
					if(data.length > 0) {
						data.forEach(item => {
							this.scrollItem.push(item)
						})
					}
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.goods-detail-container {
		width: 100%;
		// height: 100%;
		padding-bottom: 120rpx;
	}
	
	.tabbox {
		display: flex;
		position: sticky;
		// position: fixed;
		top: 44px;
		left: 0;
		z-index: 888;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
		border-bottom: 1px #f0f0f0 solid;
		.tabbar-item {
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active {
				font-weight: bold;
				transition: all .5s;
			}
		}
		.line {
			position: absolute;
			bottom: 0;
			height: 4px;
			background-color: #52e3fc;
			transition: .5s all;
		}
	}

	.goods-pic-box {
		width: 100%;
		height: 840rpx;
		.showcase-pic {
			height: 680rpx;
			background-color: #fff;

			.swiper-container {
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	/deep/ scroll-view ::-webkit-scrollbar {
		display: none;
	}

	.dot-box {
		.dot-list {
			width: 100%;
			padding: 20rpx;
			white-space: nowrap;
			overflow: auto;
			box-sizing: border-box;

			.dot {
				width: 120rpx;
				height: 120rpx;
				background-color: #fff;
				display: inline-block;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}

				&:not(:last-child) {
					margin-right: 20rpx;
				}

				&.current {
					border-radius: 4rpx;
					border: #000 solid 1px;
				}
			}
		}
	}

	.wrapper {
		padding: 0 20rpx;
	}

	.introduction-box {
		padding: 20rpx;
		background-color: #fff;

		.price-box {
			// height: 20px;
			display: flex;
			line-height: 20px;
			justify-content: space-between;

			.price {
				font-size: 18px;
				font-weight: bold;

				text {
					font-size: 24px;
				}
			}

			.sell-count {
				color: #d9d9d9;
				font-size: 12px;
			}
		}

		.content-box {
			margin-top: 20rpx;
		}
	}

	.common {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.setting-service-box {
		padding: 20rpx;

		.title {
			display: flex;
			width: 100rpx;
			font-size: 12px;
			align-items: center;
			justify-content: center;
		}

		.serivce-list {
			display: flex;
			flex-wrap: wrap;
			font-weight: bold;
			font-size: 10px;
		}

		.service-item {
			display: flex;
			align-items: center;
			letter-spacing: 4rpx;
			margin-left: 20rpx;
		}

		.item {
			display: flex;
			margin-top: 20rpx;
		}

		.item:not(:last-child) {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}

	.store-box {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;

		.store-wrap {
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.store-avatar {
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.store-info {
			margin: 0 30rpx;
			width: 60%;
		}

		.store-name {
			font-size: 17px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.store-desc {
			font-size: 12px;
			overflow: hidden; //多出的隐藏
			//text-overflow: ellipsis;//多出部分用...代替
			display: -webkit-box; //定义为盒子模型显示
			-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
			-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		}

		.goto-store {
			width: 25%;
			display: flex;
			font-size: 10px;
			color: #d9d9d9;
			letter-spacing: 4rpx;
			align-items: center;
			justify-content: center;
		}
	}
	
	.similar-goods {
		padding: 20rpx;
		box-sizing: border-box;
		.title {
			color: #000;
			font-weight: bold;
			height: 30px;
			margin-bottom: 20rpx;
			line-height: 60rpx;
		}
		swiper {
			width: 100%;
			height: 340px;
		}
		swiper-item {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			// justify-content: space-around;
		}
		.goods-item {
			width: 31.33%;
			height: 164px;
			box-sizing: border-box;
			border: #f0f0f0 solid 1px;
			// border: #000 solid 1px;
			padding: 5px;
			&:not(:nth-child(3n)) {
				margin-right: 10px;
			}
			navigator {
				width: 100%;
				height: 100%;
				display: block;
				box-sizing: border-box;
			}
			.img-box {
				width: 150rpx;
				height: 150rpx;
				margin: 5px auto 5px auto;
				box-sizing: border-box;
				border: #f0f0f0 solid 1px;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.goods-info {
				width: 100%;		
				box-sizing: border-box;
				.description {
					font-size: 12px;
					white-space: pre-wrap;
					margin-top: 8rpx;
					margin-bottom: 10rpx;
					overflow: hidden; //多出的隐藏
					//text-overflow: ellipsis;//多出部分用...代替
					display: -webkit-box; //定义为盒子模型显示
					-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
					-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				}
						
				.goods-price {
					font-size: 9px;
					font-weight: bold;
					text-align: center;
					span {
						font-size: 13px;
					}
				}
			}
		}
	}

	.goods-desc {
		margin-top: 20rpx;
		padding: 40rpx;
		background-color: #fff;
	}
	
	.none-desc {
		width: 100%;
		// height: 50px;
		.title {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 20px;
		}
	}

	.specification-container {
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		// background-color: rgba(0, 0, 0, .4);
		z-index: 1000;
	}

	.specification-mask {
		width: 100%;
		height: auto;
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: 0px auto;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
	}

	.specification-popup {
		width: 100%;
		height: auto;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		background-color: #fff;
		box-sizing: border-box;

		.popup-close {
			top: 30rpx;
			right: 30rpx;
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.popup-header {
		display: flex;
		padding: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f4f4f4;
		justify-content: space-between;

		.popup-header-img {
			width: 160rpx;
			height: 160rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.popup-header-text {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 500rpx;
			.popup-price {
				display: flex;
			}

			.now {
				font-size: 24px;
				font-weight: bold;

				label {
					font-size: 18px;
				}

				text {
					vertical-align: bottom;
				}
			}

			.before {
				box-sizing: border-box;
				color: #999;
				display: flex;
				align-items: flex-end;
				font-size: 12px;
				margin-left: 10rpx;
				text-decoration: line-through;
				padding-bottom: 8rpx;
			}

			.parameter {
				font-size: 12px;

				text {
					margin: 10rpx;
				}
			}

			.setting {
				color: #999;
				font-size: 12px;

				text {
					margin: 10rpx;
				}
			}
		}
	}

	/deep/ scroll-view {
		overscroll-behavior-y: contain !important;
	}

	.specification-slider {
		width: 100%;
		max-height: 600rpx;
		padding-top: 10px;
	}

	.specification-sele {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0px 3%;

		&.count {
			display: flex;
			height: 26px;
			margin-bottom: 15px;

			.specification-sele-name {
				width: 100%;
				height: 26px;
				line-height: 26px;
				font-size: 15px;
				color: #333;
				font-weight: bold;
				margin-bottom: 0;
			}
		}
	}

	.specification-sele-name {
		width: 100%;
		height: auto;
		font-size: 15px;
		color: #333;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.specification-sele-list {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		text {
			color: #52e3fc;
			margin: 0px 0%;
			border-radius: 4px;
			text-align: center;
			box-sizing: border-box;
			min-width: 30%;
			border: 1px #52e3fc solid;
			margin-bottom: 15px;
			font-size: 14px;
			line-height: 33px;
			padding: 0px 2%;
			margin-right: 3%;
		}
	}

	.popup-submit {
		border-top: #f5f5f5 solid 1px;
		padding: 20rpx 30rpx;
		// height: 120rpx;
		box-sizing: border-box;

		.popup-btn {
			color: #fff;
			text-align: center;
			line-height: 40px;
			background-color: #52e3fc;
		}
	}

	.none {
		bottom: -100%;
	}

	.none .specification-popup {
		bottom: -100%;
		transition: all 0.5s;
	}

	.none .specification-mask {
		display: none;
		transition: all 0.5s;
	}

	.show {
		bottom: 0px;
	}

	.show .specification-popup {
		bottom: 0%;
		transition: all 0.5s;
	}

	.show .specification-mask {
		display: block;
		transition: all 0.5s;
	}

	.current {
		background: #52e3fc;
		color: #fff !important;
	}
</style>
